<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body">
				<specifications-model v-bind="{data:data}" @hideModal="hideModal" @close_box="close_box" @attrClick="attrClick" @guigejian="guigejian" @goodNumChange="goodNumChange" @onConfirm="onConfirm"></specifications-model>
				<goods-specifications-model v-bind="{data:data}" @previewImage="previewImage" @hideAttrPicker="hideAttrPicker" @groupCheck="groupCheck" @attrNumClick="attrNumClick" @dappAttrClick="dappAttrClick" @numberSub="numberSub" @numberBlur="numberBlur" @numberAdd="numberAdd"></goods-specifications-model>
				<comp-quick-navigation v-bind="{data:data}" @cutover="cutover" @map_power="map_power" @to_dial="to_dial" @openWxapp="openWxapp"></comp-quick-navigation>
        <view :class="[data.show_attr_picker||data.show||data.no_scroll?'no-scroll':'']">
            <view style="padding-bottom: 120upx">
							<goods-banner v-bind="{data:data}" @hide="hide" @onGoodsImageClick="onGoodsImageClick" @play="play"></goods-banner>
							<goods-info v-bind="{data:data}" @showDialogBtn="showDialogBtn" @jian="jian" @goodNumChange="goodNumChange" @jia="jia" @showShareModal="showShareModal" @showAttrPicker="showAttrPicker" @getGoodsQrcode="getGoodsQrcode" @shareModalClose="shareModalClose" @close="close" @goodsQrcodeClick="goodsQrcodeClick" @saveGoodsQrcode="saveGoodsQrcode" @goodsQrcodeClose="goodsQrcodeClose" @onShareWebMessage="onShareWebMessage"></goods-info>
                <view class="tab-group">
                    <view class="flex-row tab-group-header">
                        <view @tap="tabSwitch" :class="['flex-grow-1 flex-x-center tab-group-item', data.tab_detail]" data-tab="detail">
                            <text class="flex-y-center">商品详情</text>
                        </view>
                        <view @tap="tabSwitch" :class="['flex-grow-1 flex-x-center tab-group-item', data.tab_comment]" data-tab="comment" v-if="data.__is_comment">
                            <text class="flex-y-center">评价</text>
                        </view>
                    </view>
                    <view class="tab-group-body">
                        <view :class="['tab-group-item', data.tab_detail]">
                            <view class="goods-detail">
															<wx-parse :myNodes="data.detail.nodes"></wx-parse>
                            </view>
                        </view>
                        <view :class="['tab-group-item', data.tab_comment]">
                            <view class="comment-count flex-row">
                                <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                    <view>全部</view>
                                    <view>({{data.comment_count.score_all>999?'999+':data.comment_count.score_all}})</view>
                                </view>
                                <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                    <view>好评</view>
                                    <view>({{data.comment_count.score_3>999?'999+':data.comment_count.score_3}})</view>
                                </view>
                                <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                    <view>中评</view>
                                    <view>({{data.comment_count.score_2>999?'999+':data.comment_count.score_2}})</view>
                                </view>
                                <view class="comment-count-item flex-grow-1 flex-x-center flex-col">
                                    <view>差评</view>
                                    <view>({{data.comment_count.score_1>999?'999+':data.comment_count.score_1}})</view>
                                </view>
                            </view>
                            <view class="comment-list">
                                <view class="comment-item flex-row" v-for="(item,index) in data.comment_list" :key="item.id">
                                    <view class="flex-grow-0" style="overflow: visible">
                                        <image mode="aspectFill" :src="item.avatar_url" style="width: 70upx;height: 70upx;border-radius: 1000upx"></image>
                                    </view>
                                    <view class="flex-grow-1">
                                        <view class="flex-row mb-20">
                                            <view class="flex-grow-1 flex-y-center nickname">{{item.nickname}}</view>
                                            <view class="flex-grow-0 flex-y-center addtime">{{item.addtime}}</view>
                                        </view>
                                        <view class="mb-20">{{item.content}}</view>
                                        <view class="pic-list" v-if="item.pic_list&&item.pic_list.length>0">
                                            <image @tap="commentPicView" class="pic-item" :data-index="index" :data-pic-index="pic_index" mode="aspectFill" :src="pic" v-for="(pic,pic_index) in item.pic_list" :key="pic.id"></image>
                                        </view>
                                        <view class="reply" v-if="item.reply_content">商家:
                                            <view class="reply-content">{{item.reply_content}}</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
								<goods-recommend v-bind="{data:data}"></goods-recommend>
            </view>
            <shopping-cart v-bind="{data:data}" v-if="data.quick==1"></shopping-cart>
            <block v-else>
                <!-- <navigator class="cart-nav" openType="redirect" url="/pages/cart/cart">
                    <image :src="data.__wxapp_img.nav.cart.url"></image>
                </navigator> -->
								<goods-buy v-bind="{data:data}" @goHome="goHome" @favoriteRemove="favoriteRemove" @favoriteAdd="favoriteAdd" @kfMessage="kfMessage" @callPhone="callPhone" @addCart="addCart" @buyNow="buyNow" @bespeakNow="bespeakNow" @onlyBuy="onlyBuy"></goods-buy>
            </block>
						<get-coupon v-bind="{data:data}" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox"></get-coupon>
        </view>
    </view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = require("../../wxParse/wxParse.js"), e = require("../../components/shopping_cart/shopping_cart.js"), o = require("../../components/specifications_model/specifications_model.js"), a = require("../../components/goods/specifications_model.js"), i = require("../../components/goods/goods_banner.js"), s = require("../../components/goods/goods_info.js"), n = require("../../components/goods/goods_buy.js"), d = require("../../components/goods/goods_recommend.js"), c = 1, r = !1, p = !0, g = 0;
	import specificationsModel from '../../components/specifications_model/specifications_model.vue'
	import goodsSpecificationsModel from '../../components/goods/specifications_model.vue'
	import goodsBanner from '../../components/goods/goods_banner.vue'
	import goodsInfo from '../../components/goods/goods_info.vue'
	import goodsRecommend from '../../components/goods/goods_recommend.vue'
	import shoppingCart from '../../components/shopping_cart/shopping_cart.vue'
	import goodsBuy from '../../components/goods/goods_buy.vue'
	import getCoupon from '../../components/common/get-coupon.vue'
	export default {
		components:{specificationsModel,goodsSpecificationsModel,goodsBanner,goodsInfo,goodsRecommend,shoppingCart,goodsBuy,getCoupon},
		data() {
			return {
				data: {
        pageType: "DAPP",
        id: null,
        goods: {},
        show_attr_picker: !1,
        form: {
            number: 1
        },
        tab_detail: "active",
        tab_comment: "",
        comment_list: [],
        comment_count: {
            score_all: 0,
            score_3: 0,
            score_2: 0,
            score_1: 0
        },
        autoplay: !1,
        hide: "hide",
        show: !1,
        x: this.getApp.core.getSystemInfoSync().windowWidth,
        y: this.getApp.core.getSystemInfoSync().windowHeight - 20,
        page: 1,
        drop: !1,
        goodsModel: !1,
        goods_num: 0,
        temporaryGood: {
            price: 0,
            num: 0,
            use_attr: 1
        },
        goodNumCount: 0,
				detail: {}
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
        var e = this;
        g = 0, c = 1, r = !1, p = !0;
        var o = t.quick;
        if (o) {
            var a = myVue.getApp.core.getStorageSync(myVue.getApp.const.ITEM);
            if (a) var i = a.total, s = a.carGoods; else var i = {
                total_price: 0,
                total_num: 0
            }, s = [];
            e.setData({
                quick: o,
                quick_list: a.quick_list,
                total: i,
                carGoods: s,
                quick_hot_goods_lists: a.quick_hot_goods_lists
            });
        }
        if ("undefined" == typeof my) {
            var n = decodeURIComponent(t.scene);
            if (void 0 !== n) {
                var d = myVue.getApp.helper.scene_decode(n);
                d.uid && d.gid && (t.id = d.gid);
            }
        } else if (null !== myVue.getApp.query) {
            var u = app.query;
            myVue.getApp.query = null, t.id = u.gid;
        }
        e.setData({
            id: t.id
        }), e.getGoods(), e.getCommentList();
    },
    onReady: function() {
        myVue.getApp.page.onReady(this);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this), e.init(this), o.init(this, e), a.init(this), i.init(this), 
        s.init(this), n.init(this), d.init(this);
        var t = this, c = myVue.getApp.core.getStorageSync(myVue.getApp.const.ITEM);
        if (c) var r = c.total, p = c.carGoods, g = t.data.goods_num; else var r = {
            total_price: 0,
            total_num: 0
        }, p = [], g = 0;
        t.setData({
            total: r,
            carGoods: p,
            goods_num: g
        });
    },
    onHide: function() {
        myVue.getApp.page.onHide(this), e.saveItemData(this);
    },
    onUnload: function() {
        myVue.getApp.page.onUnload(this), e.saveItemData(this);
    },
    onPullDownRefresh: function() {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function() {
        myVue.getApp.page.onReachBottom(this);
        var t = this;
        "active" == t.data.tab_detail && t.data.drop ? (t.data.drop = !1, t.goods_recommend({
            goods_id: t.data.goods.id,
            loadmore: !0
        })) : "active" == t.data.tab_comment && t.getCommentList(!0);
    },
    onShareAppMessage: function() {
        myVue.getApp.page.onShareAppMessage(this);
        var t = this, e = myVue.getApp.getUser();
        return {
            path: "/pages/goods/goods?id=" + this.data.id + "&user_id=" + e.id,
            success: function(e) {
                1 == ++g && t.shareSendCoupon(t);
            },
            title: t.data.goods.name,
            imageUrl: t.data.goods.pic_list[0]
        };
    },
		methods: {
			closeCouponBox: function(t) {
        this.setData({
            get_coupon_list: ""
        });
    },
    to_dial: function(t) {
        var e = this.data.dapp.contact_tel;
        myVue.getApp.core.makePhoneCall({
            phoneNumber: e
        });
    },
    getGoods: function() {
        var e = this;
        if (e.data.quick) {
            var o = e.data.carGoods;
            if (o) {
                for (var a = o.length, i = 0, s = 0; s < a; s++) o[s].goods_id == e.data.id && (i += parseInt(o[s].num));
                e.setData({
                    goods_num: i
                });
            }
        }
        myVue.getApp.request({
            url: myVue.getApp.api.default.goods,
            data: {
                id: e.data.id
            },
            success: function(o) {
                if (0 == o.code) {
                    var a = o.data.detail;
                    t.wxParse("detail", "html", a, e);
                    var i = o.data;
                    i.attr_pic = o.data.attr_pic, i.cover_pic = o.data.pic_list[0].pic_url;
                    var s = i.pic_list, n = [];
                    for (var d in s) n.push(s[d].pic_url);
                    i.pic_list = n, e.setData({
                        goods: i,
                        attr_group_list: o.data.attr_group_list,
                        btn: !0
                    }), e.goods_recommend({
                        goods_id: o.data.id,
                        reload: !0
                    }), e.selectDefaultAttr();
                }
                1 == o.code && e.getApp.core.showModal({
                    title: "提示",
                    content: o.msg,
                    showCancel: !1,
                    success: function(t) {
                        t.confirm && e.getApp.core.reLaunch({
                            url: "/pages/index/index"
                        });
                    }
                });
            }
        });
    },
    getCommentList: function(t) {
        var e = this;
        t && "active" != e.data.tab_comment || r || p && (r = !0, myVue.getApp.request({
            url: myVue.getApp.api.default.comment_list,
            data: {
                goods_id: e.data.id,
                page: c
            },
            success: function(o) {
                0 == o.code && (r = !1, c++, e.setData({
                    comment_count: o.data.comment_count,
                    comment_list: t ? e.data.comment_list.concat(o.data.list) : o.data.list
                }), 0 == o.data.list.length && (p = !1));
            }
        }));
    },
    tabSwitch: function(t) {
        var e = this;
        "detail" == t.currentTarget.dataset.tab ? e.setData({
            tab_detail: "active",
            tab_comment: ""
        }) : e.setData({
            tab_detail: "",
            tab_comment: "active"
        });
    },
    commentPicView: function(t) {
        var e = this, o = t.currentTarget.dataset.index, a = t.currentTarget.dataset.picIndex;
        myVue.getApp.core.previewImage({
            current: e.data.comment_list[o].pic_list[a],
            urls: e.data.comment_list[o].pic_list
        });
    },
		onShareWebMessage: function(e) {
			var t = this, e = myVue.getApp.getUser();
				this.$webShare({
					path: "/pages/goods/goods?id=" + this.data.id + "&user_id=" + e.id,
					title: t.data.goods.name,
					imageUrl: t.data.goods.pic_list[0]
				}).then(function() {
					1 == ++g && myVue.getApp.page.shareSendCoupon(t);
				})
		},
		},
	}
</script>

<style scoped>

.page /deep/ view {
    overflow: visible;
}

.page /deep/ .no-scroll {
    height: 100%;
    overflow-y: hidden;
}

.page /deep/ .share-tip {
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0,0,0,0.65);
}

.page /deep/ .goods-detail {
    box-sizing: border-box;
    padding: 24upx 0;
    background: #fff;
}

.page /deep/ .goods-detail text,.goods-detail image,.goods-detail view {
    box-sizing: border-box;
    max-width: 100%;
}

.page /deep/ .cart-nav {
    position: fixed;
    top: calc(180upx + var(--window-top));
    right: 24upx;
    background: rgba(255,255,255,0.5);
    font-size: 0;
    padding: 20upx;
    border-radius: 999upx;
    box-shadow: 0 1upx 3upx rgba(0,0,0,0.2);
    z-index: 100;
}

.page /deep/ .cart-nav image {
    width: 42upx;
    height: 42upx;
}

.page /deep/ .tab-group .tab-group-header {
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
}

.page /deep/ .tab-group .tab-group-header .tab-group-item text {
    height: 100upx;
    border-bottom: 2upx solid transparent;
}

.page /deep/ .tab-group .tab-group-header .tab-group-item.active text {
    color: #ff4544;
    border-bottom-color: #ff4544;
}

.page /deep/ .tab-group .tab-group-body .tab-group-item {
    display: none;
}

.page /deep/ .tab-group .tab-group-body .tab-group-item.active {
    display: block;
}

.page /deep/ .comment-count {
    background: #fff;
    margin-bottom: 20upx;
}

.page /deep/ .comment-count .comment-count-item {
    text-align: center;
    padding: 20upx 0;
    font-size: 9pt;
}

.page /deep/ .comment-item {
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
    padding: 32upx 24upx;
}

.page /deep/ .comment-item .nickname {
    padding-left: 24upx;
    height: 70upx;
    font-weight: bolder;
}

.page /deep/ .comment-item .addtime {
    color: #888;
}

.page /deep/ .comment-item .pic-list {
    margin-left: -8upx;
    margin-top: -8upx;
}

.page /deep/ .comment-item .pic-item {
    width: 200upx;
    height: 200upx;
    margin-left: 8upx;
    margin-top: 8upx;
    display: inline-block;
}

.page /deep/ .reply {
    margin: 20upx 24upx 20upx 0upx;
    border-radius: 16upx;
    background: #f7f7f7;
    font-size: 11pt;
    padding: 22upx 30upx;
    color: #ff4544;
}

.page /deep/ .reply-content {
    display: inline;
    color: #666;
}

.page /deep/ .comment-item .score-tag {
    display: inline-block;
    background: #eee;
    font-size: 9pt;
    padding: 4upx 12upx;
    border-radius: 5upx;
}

.page /deep/ .loading-more {
    text-align: center;
    opacity: 0;
}

.page /deep/ .loading-more.active {
    opacity: 1;
}

.page /deep/ .loading-more image {
    width: 160upx;
    height: 80upx;
}

.page /deep/ .pic-left {
    margin-right: 5upx;
}

.page /deep/ .pic-right {
    margin-left: 5upx;
}

.page /deep/ .contact {
    background: #118eea;
    color: #fff;
}
</style>
